<template>
  <div class="app-content">
    <div class="h0 flex1">
      <div class="h100 card flex index-banner">
        <div class="flex3">
          <div class="h50 flex-alignc-justifyb ml40 mr40">
            <div class="flex-alignc pr20">
              <svg-icon class="fs-56 mr10" icon-class="gonglv" />
              <div>
                <div class="c767 mb10">当前功率 (kW)</div>
                <div class="c333 fs-26">{{ indexInfo.nowPower }}</div>
              </div>
            </div>
            <div class="flex-alignc pr20">
              <svg-icon class="fs-56 mr10" icon-class="dianya" />
              <div>
                <div class="c767 mb10">当前电压 (V)</div>
                <div class="c333 fs-26">{{ indexInfo.nowVoltage }}</div>
              </div>
            </div>
            <div class="flex-alignc pr20">
              <svg-icon class="fs-56 mr10" icon-class="zujian" />
              <div>
                <div class="c767 mb10">组件数量 (块)</div>
                <div class="c333 fs-26">{{ indexInfo.totalNum }}</div>
              </div>
            </div>
          </div>
          <div class="h50 flex-alignc-justifyb ml40 mr40">
            <div class="flex-alignc pr20">
              <svg-icon class="fs-56 mr10" icon-class="dianliang" />
              <div>
                <div class="c767 mb10">当日发电量 (kW·h)</div>
                <div class="c333 fs-26">{{ indexInfo.todayElectricityQuantity }}</div>
              </div>
            </div>
            <div class="flex-alignc pr20">
              <svg-icon class="fs-56 mr10" icon-class="dianliang" />
              <div>
                <div class="c767 mb10">累计发电量 (kW·h)</div>
                <div class="c333 fs-26">{{ indexInfo.totalElectricityQuantity }}</div>
              </div>
            </div>
            <div class="flex-alignc pr20">
              <svg-icon class="fs-56 mr10" icon-class="CO2" />
              <div>
                <div class="c767 mb10">CO2减排 (t)</div>
                <div class="c333 fs-26">{{ indexInfo.co2 }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="flex2 flex-alignc">
          <img class="w100 h100" style="object-fit: cover;" :src="indexBg" alt="">
        </div>
      </div>
    </div>
    <div class="h0 flex2  mt10 mb10">
      <div class="h100 flex">
        <div class="flex1 card mr10 flex-column">
          <div class="flex-alignc-justifyb mb10">
            <div class="card-title">工单列表</div>
            <el-select v-model="options.tableRequest.data.orderStatus" placeholder="请选择" style="width: 200px;" @change="handleOrderStatusChange">
              <el-option label="全部" value=" "></el-option>
              <el-option label="待处理" value="1"></el-option>
              <el-option label="进行中" value="2"></el-option>
              <el-option label="已完成" value="3"></el-option>
              <el-option label="已拒绝" value="4"></el-option>
            </el-select>
          </div>
          <div class="h0 flex1">
            <RichTable ref="richTableRef" :options="options">
              <template #orderNo="{ row }">
                <div style="color: #5592bc;">{{ row.orderNo }}</div>
              </template>
              <template #detail="{ row }">
                <div style="color: #5592bc;">{{ row.detail }}</div>
              </template>
               <template #orderStatus="{ row }">
                <span v-if="row.orderStatus==1" style="color: #1B66F8;">待处理</span>
                <span v-else-if="row.orderStatus==2" style="color: #00A5B8;">进行中</span>
                <span v-else-if="row.orderStatus==3" style="color: #20A857;">已完成</span>
                <span v-else-if="row.orderStatus==4" style="color: #F43430;">已拒绝</span>
              </template>
            </RichTable>
          </div>
        </div>
        <div class="flex1 card flex-column">
          <div class="flex-alignc-justifyb mb10">
            <div class="card-title">实时功率</div>
            <el-date-picker v-model="date" type="date" value-format="YYYY-MM-DD" placeholder="请选择日期" :clearable="false"
              :editable="false" :disabled-date="disabledDate" @change="handleDateChange">
            </el-date-picker>
          </div>
          <div class="flex1 flex-column"> 
            <div v-if="powerInfo.list?.length" class="c7B7">实时功率:{{ powerInfo.nowPower }}kW</div>
            <!-- <PowerEcharts class="h0 flex1" :data="powerInfo.list"></PowerEcharts> -->
            <PowerEcharts class="h0 flex1" :data="powerData"></PowerEcharts>
          </div>
        </div>
      </div>
    </div>
    <div class="h0 flex2">
      <div class="h100 card flex-column">
        <div class="flex-alignc-justifyb">
          <div class="card-title">累计发电量</div>
          <TypeDate v-model:type="type" v-model:date="electricDate" filter="日" @change="handleTypeDateChange"></TypeDate>
        </div>
        <div class="flex1 flex-column">
          <div v-if="electricInfo.list?.length" class="c7B7">{{ typeText }}发电量:{{ electricInfo.amount }}kW·h</div>
          <ElectricEcharts class="h0 flex1" :data="electricInfo.list" :dateType="type"></ElectricEcharts>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="Index">
import { indexInfoApi,stationPowerApi,stationElectricApi } from '@/api/station';
import indexBg from '@/assets/images/index-bg.png'
import PowerEcharts from '@/components/Echart/PowerEcharts'
import ElectricEcharts from '@/components/Echart/ElectricEcharts'
import TypeDate from '@/components/TypeDate'
import useUserStore from '@/store/modules/user'
const userStore = useUserStore()
const { proxy } = getCurrentInstance()

// 工单列表
const richTableRef = ref();
const options = ref({
  header:false,
  // 表格接口
  tableRequest: {
    url: "/bopeng-cms/station/index/rule/listPage",
    method: 'post',
    data: {
      stationId: userStore.stationInfo.stationId,
      orderStatus:' '
    }
  },
  column: [
    { prop: 'orderNo', label: '工单编号',attrs: { showOverflowTooltip: true } },
    { prop: 'detail', label: '工单明细', },
    { prop: 'creator', label: '创建人', },
    { prop: 'userName', label: '处理人', },
    { prop: 'orderStatus', label: '状态', },
  ],
})
// 初始化表格数据
const handleOrderStatusChange = () => {
  richTableRef.value.initTable()
}

// 初始化数据
const indexInfo = ref({})
const init = async () => {
  try {
    let res = await indexInfoApi({stationId: userStore.stationInfo.stationId})
		res.data.co2 = parseFloat((res.data.totalElectricityQuantity * 0.997 / 1000).toFixed(2))
    indexInfo.value = res.data
  }catch(err) {}
}

// 获取电站实时功率
const date = ref(proxy.parseTime(new Date(), "{y}-{m}-{d}"))
const handleDateChange = () => {
  getStationPower()
}
const disabledDate = (time) => { // 只能选择当前日期之前的日期
  return Date.now() < time.getTime();
}
const powerInfo = ref({})
const powerData = ref([])
const getStationPower = async () => {
  try {
    let res = await stationPowerApi({
      stationId: userStore.stationInfo.stationId,
      date:date.value
    })
    powerInfo.value = res.data
    powerData.value = [{legendName:'功率(kW)',list:powerInfo.value.list}]
  }catch(err) {}
}

// 获取累计发电量
const type = ref(2) // type:1-日 2-月, 3-年， 4-总
const typeText = ref('月')
const electricDate = ref('')
// 时间类型改变回调
const handleTypeDateChange = () => {
  if(type.value==2) {
    typeText.value = '月'
  }else if(type.value==3) {
    typeText.value = '年'
  }else if(type.value==4) {
    typeText.value = '累计'
  }
  getStationElectricApi()
}
const electricInfo = ref({})
const getStationElectricApi = async () => {
  try {
    let res = await stationElectricApi({
      stationId: userStore.stationInfo.stationId,
      type:type.value,
      date:electricDate.value,
    })
    electricInfo.value = res.data
  }catch(err) {}
}

onMounted(() => {
  init()
  getStationPower()
  getStationElectricApi()
})
</script>

<style scoped lang="scss">
.app-content {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 84px);
}

.index-banner {
  background-color: #e6effa;
}
</style>
